<template>
	<div class="modal-container">
		<el-dialog title="积分价值规则设置" width="1000px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" @closed="on_closed">

			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">标题</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.ruleTitle" placeholder="标题"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">状态</div>
						<div class="input-item">
							<el-radio-group v-model="form.ruleStatus">
								<el-radio :label="1">开启</el-radio>
								<el-radio :label="0">禁用</el-radio>
							</el-radio-group>
						</div>
					</div>


					<div class="input-box flex">
						<div class="label">是否开启消费赠送积分</div>
						<div class="input-item">
							<el-radio-group v-model="ruleInfo.ifJifen" @change="changeType">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="panel-2" v-if="ruleInfo.ifJifen == 1">
						<div class="input-box flex">
							<div class="label">消费多少金额赠送1积分</div>
							<div class="input-item">
								<el-input clearable type="number" v-model="ruleInfo.money" placeholder="消费多少金额赠送1积分">
								</el-input>
							</div>
						</div>
						<div class="input-box flex">
							<div class="label">一单最多给多少积分</div>
							<div class="input-item">
								<el-input clearable type="number" v-model="ruleInfo.maxJifen" placeholder="一单最多给多少积分">
								</el-input>
							</div>
						</div>
					</div>


					<div class="input-box flex">
						<div class="label">是否开启积分抵现</div>
						<div class="input-item">
							<el-radio-group v-model="ruleInfo.ifMoney" @change="changeType">
								<el-radio :label="1">是</el-radio>
								<el-radio :label="0">否</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="panel-2" v-if="ruleInfo.ifMoney == 1">
						<div class="input-box flex">
							<div class="label">多少积分可以抵现1元</div>
							<div class="input-item">
								<el-input clearable type="number" v-model="ruleInfo.jifen" placeholder="多少积分可以抵现1元">
								</el-input>
							</div>
						</div>
						<div class="input-box flex">
							<div class="label">一单最多可以抵扣多少元</div>
							<div class="input-item">
								<el-input clearable type="number" v-model="ruleInfo.maxMoney" placeholder="一单最多可以抵扣多少元">
								</el-input>
							</div>
						</div>

					</div>

					<div class="input-box flex">
						<div class="label">过期时间</div>
						<div class="input-item">
							<!-- <el-date-picker clearable="" v-model="form.expireTime" type="datetime"
								format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
							</el-date-picker> -->
							<el-input clearable type="text" v-model="ruleInfo.expireTime" placeholder="请填写天数">
							</el-input>
						</div>
					</div>




					<!-- <div class="input-box flex">
						<div class="label">规则内容</div>
						<div class="input-item">
						</div>
					</div> -->


					<!-- <div class="express-rule-container">
						<div class="express-rule">
							<div class="loop-wrap">

								<div class="table-sec">
									<el-table :data="rule_list" stripe border>
										<el-table-column prop="man" label="金额达XX元" width="auto">
											<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.man"> </el-input>
												</div>
											</template>
</el-table-column>

<el-table-column prop="man" label="优惠XX元" width="auto">
	<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.jian"> </el-input>
												</div>
											</template>
</el-table-column>

<el-table-column prop="man" label="备注" width="auto">
	<template slot-scope="scope">
												<div class="id-text">
													<el-input v-model="scope.row.beizhu"> </el-input>
												</div>
											</template>
</el-table-column>


<el-table-column fixed="right" label="操作" width="120">
	<template slot-scope="scope">
												<div data-title="列表操作" class="row-actions-box">
													<el-button @click="do_row_remove(scope.row, scope)" type="text">删除</el-button>
												</div>
											</template>
</el-table-column>
</el-table>

<div class="loop-add">
	<el-button type="primary" @click="do_row_add()"> 增加组 </el-button>
</div>
</div>
</div>
</div>

</div> -->

				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";

export default {
	name: "modal-hetong",
	components: {

	},

	data() {
		return {
			show: false,
			info: {},
			form: {
				"id": "",
				"ruleTitle": "",
				"ruleType": "4",
				"ruleInfo": "",
				"ruleStatus": 1,
			},

			ruleInfo: {
				"ifJifen": 1,
				"money": 1,
				"maxJifen": '',
				"ifMoney": 1,
				"jifen": '',
				"maxMoney": '',
				"expireTime": ""
			},


		};
	},
	computed: {},
	watch: {

	},
	created() {

	},

	methods: {
		init(row) {
			console.log('初始化 积分价值')
			this.show = true;
			if (row) {
				this.info = row
				this.query_detail()
			}
		},

		query_detail() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_foreignInfo",
					id: this.info.id,
				}
			}).then(res => {
				if (res.code == 200) {
					let data = res.data;
					this.form = {
						"id": data.id,
						"ruleTitle": data.ruleTitle,
						"ruleType": data.ruleType,
						"ruleInfo": JSON.stringify(data.ruleInfo),
						"ruleStatus": data.ruleStatus,
					}

					if (data.ruleInfo) {
						this.ruleInfo = data.ruleInfo
					}
				}
			})
		},


		changeType(value) {
			console.log(value)

			// if (value == 1) {
			// 	this.ruleInfo.first = '';
			// 	this.ruleInfo.leijia = '';
			// 	this.ruleInfo.day = '';
			// } else if (value == 2) {
			// 	this.ruleInfo.jifen = '';
			// }
		},

		on_before_close() {
			this.show = false;
		},
		on_closed() {
			console.log('on_closed')

			this.form = {
				"id": "",
				"ruleTitle": "",
				"ruleType": "4",
				"ruleInfo": "",
				"ruleStatus": 1,
			}

			this.rule_list = []
		},
		do_submit() {
			if (!this.form.ruleTitle) {
				alertErr("请填写标题");
				return;
			}

			if (this.ruleInfo.ifJifen == 1) {
				if (!this.ruleInfo.money) {
					alertErr("请填写消费多少金额赠送1积分");
					return;
				} if (!this.ruleInfo.maxJifen) {
					alertErr("请填写一单最多给多少积分");
					return;
				}
			} else if (this.ruleInfo.ifMoney == 1) {
				if (!this.ruleInfo.jifen) {
					alertErr("请填写多少积分可以抵现1元");
					return;
				}
				if (!this.ruleInfo.maxMoney) {
					alertErr("请填写一单最多可以抵扣多少元");
					return;
				}
			}

			let params = {
				...this.form,
				ruleInfo: JSON.stringify(this.ruleInfo)
			}

			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_saveForeign",
					id: this.info.id,
					...params
				}
			}).then(res => {
				alert(res)
				if (res.code == 200) {
					this.$emit('confirm')
					this.show = false
				}
			})
		},

		uploadChange(url) {
			this.form.invoiceUrl = url;
		},

		do_row_remove(row, scope) {
			this.rule_list.splice(scope.$index, 1)
		},
		do_row_add() {
			this.rule_list.push({
				"man": '',
				"jian": '',
				"beizhu": ""
			})
		},
	},
};
</script>

<style scoped lang="less">
.upload-plus {
	width: 140px;
}

/deep/ .el-upload {
	display: block;
	width: 200px;
	margin: 0 auto;
	margin: 0;

	.empty {
		.flex-center();
	}
}

/deep/ .modal-record {
	// margin-top: 80px !important;


	.modal-inner {
		padding: 0;
	}

	.el-dialog__header {
		.flex-between();
		border-bottom: 1px solid #eee;
		background: #a98c4d;
		background: #f7f7f7;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 18px;
		color: #333;

		.el-dialog__title {
			color: #000;
		}

		.el-dialog__headerbtn {

			// top: 0;
			.el-dialog__close {
				color: #000;
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		text-align: center;



	}
}

.modal-ctx {
	padding: 30px 50px;
	max-height: 60vh;
	overflow-y: auto;
	border-bottom: 1px solid #ddd;

	.tip {
		margin-bottom: 20px;
		color: #444;
		font-size: 14px;
	}

	.input-box {
		margin-bottom: 15px;
		position: relative;

		&.flex {
			display: flex;
			align-items: flex-start;
			// align-items: center;

			.label {
				margin-bottom: 0;
			}
		}

		.label {
			// text-align: right;
			// padding-right: 10px;

			min-width: 80px;
			min-width: 120px;
			min-width: 150px;
			min-width: 180px;
			// margin-right: 20px;
			margin-bottom: 20px;
			font-size: 14px;
			color: #6e7285;
		}

		.input-item {
			flex: 1;
			display: flex;
			align-items: center;


			.el-input {
				width: 220px;
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
}

.upload-ctx {
	margin: 20px 0;
}

.btn-send {}
</style>